import React from 'react'
import { useRef } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { add } from '../../store/modules/counterStore'
import { addList } from '../../store/modules/counterStore'

export default function index() {
  //使用数据
  const { count } = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const inputRef = useRef()
  // const addCount = () => {
  //   //调用仓库中的add方法
  //   const action =add()
  //   dispatch(action)
  // }
  const handkeAddList = () => {
    //调用仓库中的addList方法
    const action = addList(inputRef.current.value)
    dispatch(action)
  }
  const { list } = useSelector(state => state.counter)
  return (
    <div>
        {/* <h3>{count}</h3>
        <button onClick={addCount}>+</button> */}

        <input type="text" ref={inputRef} />
        <button onClick={handkeAddList}>添加</button>
        <ul>
          {
            list.map((item,index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
    </div>
  )
}
